Skip to main content

Development

Back to Documentation Intro Contents

Framework Specific Development

All Frameworks

  • Set up your HTML head with some nice small tweaks

    • Use theme-colour and add your theme <meta name="theme-color" content="#f00" />

    • The theme-color doesn’t have to be unique within the page. It can be personalized using the media attribute to change colors depending on the browser’s/computer’s configuration.

      <!-- theme color is white unless in dark mode, then it's black -->
<meta name="theme-color" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />

    • Add open graph meta tags - but note that the values should be page-specific and should be updated when navigating between pages.

      <meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of the page.">
<meta property="og:url" content="link.to.be.displayed.when.shared">
<meta property="og:image" content="link.to.thumbnail.image">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of the page.">
<meta name="twitter:url" content="link.to.be.displayed.when.shared">
<meta name="twitter:image" content="link.to.thumbnail.image">

    • Add a favicon

  • Add smooth scrolling (in CSS file);

    html {
  scroll-behavior: smooth;
}

React

React Logo

Vite

Vite Logo

Next.js

NextJS Logo

CSS

Recommendations: (from Robin Wieruch)

CSS-in-CSS

  • CSS Modules - CSS Modules give you a way to encapsulate your CSS into component co-located modules. This way, styles don't leak accidentally into other components:

    import styles from './style.module.css';

const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

Utility-First-CSS

const Headline = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>

CSS-in-JS

Personally I'd not recommended runtime CSS-in-JS anymore due to performance and other problems in server-side environments

  • Styled Components
  • StyleX by Facebook
import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;

const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

Issues and Debugging

React Issues

React Logo

  • For issues in React (including Vite and Next.JS):

    • General debugging - Debug React in VSCode

    • Issue 1 - Cannot be used as a JSX component

      'SidebarItem' cannot be used as a JSX component.   Its type '(props: SidebarLink) => Element' is not a valid JSX element type.     Type '(props: SidebarLink) => Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.       Type 'Element' is not assignable to type 'ReactNode'.         Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

      Solution link

HTML, CSS and JavaScript Issues

  • If you are trying to minify JavaScript files and you get the error Minify Failed: 'preserve_line' is not a supported option, then run the command "Minify" again in VSCode using CTRL + Shift + M.
    • If this still fails, open user settings in VSCode, change a value in the minify section and try to save the file again to force the minification.
    • Return the user settings options back once done.

Security and Authentication

Security

  • Set up repository security scanning via Snyk
    • Add the project to Snyk here
    • Check and close off all vulnerabilities

Authentication

Documentation

  • Set up documentation for the project via a README.md file
  • Write from scratch or use a template such as readme.so

State Management

  • Zustand - State management library - It allows you to manage global application state which can be read and modified by any React component that is connected to its store(s).
  • Redux

Recommendations: (from Robin Wieruch)

  • useState/useReducer for co-located or shared state
  • opt-in useContext for enabling little global state
  • Zustand (or an alternative) for lots of global state

Data Fetching

Routing

Components

  • Material UI - Component Library - yarn add @material-ui/core - https://material-ui.com/
  • shadcn/ui - https://ui.shadcn.com/
  • saas-ui
    • Getting started with SaaS UI is easy. First, you’ll have to install Chakra UI into your React project, then install SaaS UI, like this:
    • npm i @chakra-ui/react @emotion/react@¹¹ @emotion/styled@¹¹ framer-motion@⁶\
    • npm i @saas-ui/react
    • If yarn is more your jam, you can do this instead:
    • yarn add @chakra-ui/react @emotion/react@¹¹ @emotion/styled@¹¹ framer-motion@⁶\
    • yarn add @saas-ui/react

Animations

In order of recommendation:

Charts

In order of recommendation:

Other Libraries

Note - for more, see "Coding Resources" Todoist project

Other Tips and Easy Wins

  • With the accent-color property you can specify the predominant color for checkboxes, radio buttons, ranges, and even progress bars.
  • Use the correct HTML <input type=""> attribute for the correct input type. There are 22 HTML input types.